<template>
  <form @submit="search">
    <input type="text" :placeholder="text" v-model="value" />
    <md-icon name="search" class="search"></md-icon>
  </form>
</template>

<script>
import { Icon } from "mand-mobile";
export default {
  name: "index",
  components: {
    [Icon.name]: Icon
  },
  props: {
    text: {
      type: String
    }
  },
  data() {
    return {
      value: ""
    };
  },
  methods: {
    search(e) {
      e.preventDefault();
      this.$emit("changeSearch", this.value);
    }
  }
};
</script>

<style scoped lang="stylus">
form{
    padding 20px 20px 14px 20px;
    position relative;
    input{
        width 100%;
        padding 19px 46px;
        box-sizing border-box;
        border-radius 40px;
        outline none;
        border 1px solid #F0F0F0;
        font-size 28px
        color #666666
        background #F0F0F0
    }
    input::-webkit-input-placeholder{
              color #cccccc
          }
    input:-ms-input-placeholder { // IE10+
        color #cccccc
    }
    input:-moz-placeholder { // Firefox4-18
        color: #cccccc;
    }
    input::-moz-placeholder { // Firefox19+
              color: #cccccc;
          }
    .search{
        position absolute;
        padding 19px 23px;
        right 20px;
        color #cccccc
    }
}
</style>
